<template>
  <div class="h-full flex relative">
    <!-- 检查预备党员考察表数据是否为空 -->
    <div v-if="!member.probationaryAssessment || !member.probationaryAssessment.assessmentOpinions || member.probationaryAssessment.assessmentOpinions.length === 0"
         class="flex-1 flex items-center justify-center">
      <n-result status="info" title="当前考察表数据为空" description="请填写相关内容">
        <template #footer>
          <n-button @click="$emit('edit')" type="primary">
            立即填写
          </n-button>
        </template>
      </n-result>
    </div>
    
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div v-else class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <!-- 第1页：封面 -->
        <div id="page-1"
          class=" mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md  p-4 md:p-8 text-sm">
          <div class=" h-full flex flex-col">
            <div class="flex-grow flex items-center justify-center">
              <h2 class="text-3xl font-bold text-center my-4">预备党员考察表</h2>
            </div>
            <div class="pb-16 px-8">
              <div class="w-full space-y-4 text-lg">
                <p><span
                    class="font-bold inline-block w-28">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>{{
                      member.memberName }}</p>
                <p><span class="font-bold inline-block w-28">党支部名称：</span>软件学院2016级本科生党支部</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 第2页：说明 -->
        <div id="page-2"
          class=" mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md  p-4 md:p-8 text-sm">
          <div class="h-full p-4 flex flex-col">
            <div class="font-bold text-center my-4 text-xl">说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</div>
            <ol class="list-decimal list-inside leading-relaxed px-4 space-y-3">
              <li>党委批准为预备党员后，其所在单位党组织要及时填写此表，对预备党员每半年考察写实一次。</li>
              <li>填表人应本着严肃负责的精神，认真、按时、如实填写，并签名盖章。</li>
              <li>预备党员转为正式党员后，党委要将此表与《入党志愿书》一同妥为保存。</li>
            </ol>
          </div>
        </div>

        <!-- 第3页：第一次个人小结 -->
        <div id="page-3"
          class=" mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-8 text-sm">
          <table class="w-full h-full border-collapse border border-solid border-black">
            <colgroup>
              <col class="w-[20%]">
              <col class="w-[13.33%]">
              <col class="w-[20%]">
              <col class="w-[13.33%]">
              <col class="w-[20%]">
              <col class="w-[13.33%]">

            </colgroup>
            <tbody>
              <tr>
                <td class="p-2  font-bold border-r border-solid border-black">姓名</td>
                <td class="p-2  border-r border-solid border-black">{{ member.memberName }}</td>
                <td class="p-2  font-bold border-r border-solid border-black">性别</td>
                <td class="p-2  border-r border-solid border-black">{{ member.genderType }}</td>
                <td class="p-2 font-bold border-r border-solid border-black">工作单位及职务</td>
                <td class="p-2 ">无</td>
              </tr>
              <tr>
                <td class="p-2 font-bold border-t border-r border-solid border-black">出生年月</td>
                <td class="p-2 border-t border-r border-solid border-black">{{ member.birthDate?.substring(0, 7) }}</td>
                <td class="p-2 font-bold border-t border-r border-solid border-black">文化程度</td>
                <td class="p-2 border-t border-r border-solid border-black">高中</td>
                <td class="p-2 font-bold border-t border-r border-solid border-black">党支部接收<br />预备党员时间</td>
                <td class="p-2 border-t border-solid border-black">2016年6月16日</td>
              </tr>
              <tr class="h-3/4">
                <td class="p-2 text-center align-middle font-bold border-t border-r border-solid border-black">
                  本<br />人<br />半<br />年<br />思<br />想<br />、<br />工<br />作<br />、<br />学<br />习<br />小<br />结
                </td>
                <td colspan="5" class="p-2 border-t border-solid border-black">
                  <div class="h-full flex flex-col justify-between">
                    <p class="indent-8">总结内容...</p>
                    <div class="text-right mt-2">
                      <p class="mb-2 font-kaiti">签名：{{ member.memberName }}</p>
                      <p>{{ formatDate(member.probationaryAssessment?.assessmentOpinions?.[0]?.signatureDate) }}</p>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 第4页：第一次组织意见 -->
        <div id="page-4"
          class=" mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-8 text-sm">
          <table class="w-full h-full border-collapse border border-solid border-black">
            <tbody>
              <tr style="height: 35%;">
                <td class="p-2 w-[15%] text-center align-middle font-bold border-r border-solid border-black">
                  介<br />绍<br />人<br />意<br />见</td>
                <td class="p-2">
                  <div class="h-full flex flex-col justify-between">
                    <p class="indent-8">{{ member.memberName }}同志自入党以来...（静态文本）</p>
                    <!-- 关键修改：应用了您描述的最终布局 -->
                    <div>
                      <p class="mb-2 font-kaiti">介绍人：{{ member.probationaryAssessment?.assessmentOpinions?.[0]?.sponsor1Name || '' }}</p>
                      <div class="flex justify-between items-end">
                        <span class="font-kaiti">介绍人：{{ member.probationaryAssessment?.assessmentOpinions?.[0]?.sponsor2Name || '' }}</span>
                        <span  class="font-kaiti">{{ formatDate(member.probationaryAssessment?.assessmentOpinions?.[0]?.sponsorOpinionDate)
                          }}</span>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr style="height: 20%;">
                <td class="p-2 text-center align-middle font-bold border-t border-r border-solid border-black">
                  党<br />小<br />组<br />意<br />见</td>
                <td class="p-2 border-t border-solid border-black"></td>
              </tr>
              <tr style="height: 45%;">
                <td class="p-2 text-center align-middle font-bold border-t border-r border-solid border-black">
                  党<br />支<br />部<br />意<br />见</td>
                <td class="p-2 border-t border-solid border-black">
                  <div class="h-full flex flex-col justify-between">
                    <p class="indent-8">{{ member.memberName }}同志被吸收为预备党员以来...（静态文本）</p>
                    <div class="text-right">
                      <p>党支部书记：{{ member.probationaryAssessment?.assessmentOpinions?.[0]?.branchSecretaryName || '' }}</p>
                      <p class="mt-2">{{
                        formatDate(member.probationaryAssessment?.assessmentOpinions?.[0]?.branchOpinionDate) }}</p>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 第5页：第二次个人小结 -->
        <div id="page-5"
          class=" mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-8 text-sm">
          <table class="w-full border-collapse border border-solid border-black h-full">
            <tbody>
              <tr class="h-full">
                <td class="p-2 w-[15%] text-center align-middle font-bold border-r border-solid border-black">
                  本<br />人<br />半<br />年<br />思<br />想<br />、<br />工<br />作<br />、<br />学<br />习<br />小<br />结
                </td>
                <td class="p-2">
                  <div class="h-full flex flex-col justify-between">
                    <p class="indent-8">总结内容...</p>
                    <div class="text-right mt-2">
                      <p class="mb-2">签名：</p>
                      <p>{{ formatDate(null) }}</p>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 第6页：第二次组织意见 -->
        <div id="page-6"
          class=" mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-4 md:p-8 text-sm">
          <table class="w-full border-collapse border border-solid border-black h-full">
            <tbody>
              <tr style="height: 35%;">
                <td class="p-2 w-[15%] text-center align-middle font-bold border-r border-solid border-black">
                  介<br />绍<br />人<br />意<br />见</td>
                <td class="p-2">
                  <div class="h-full flex flex-col justify-between">
                    <p class="indent-8">{{ member.memberName }}同志在预备期教育和考察期间...（静态文本）</p>
                    <!-- 关键修改：应用了您描述的最终布局 -->
                    <div>
                      <p class="mb-2">介绍人：{{ member.probationaryAssessment?.assessmentOpinions?.[1]?.sponsor1Name || '' }}</p>
                      <div class="flex justify-between items-end">
                        <span>介绍人：{{ member.probationaryAssessment?.assessmentOpinions?.[1]?.sponsor2Name || '' }}</span>
                        <span>{{ formatDate(member.probationaryAssessment?.assessmentOpinions?.[1]?.sponsorOpinionDate)
                          }}</span>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr style="height: 20%;">
                <td class="p-2 text-center align-middle font-bold border-t border-r border-solid border-black">
                  党<br />小<br />组<br />意<br />见</td>
                <td class="p-2 border-t border-solid border-black"></td>
              </tr>
              <tr style="height: 45%;">
                <td class="p-2 text-center align-middle font-bold border-t border-r border-solid border-black">
                  党<br />支<br />部<br />意<br />见</td>
                <td class="p-2 border-t border-solid border-black">
                  <div class="h-full flex flex-col justify-between">
                    <p class="indent-8">根据{{ member.memberName }}同志一年预备期间的表现...（静态文本）</p>
                    <div class="text-right">
                      <p>党支部书记：{{ member.probationaryAssessment?.assessmentOpinions?.[1]?.branchSecretaryName || '' }}</p>
                      <p class="mt-2">{{
                        formatDate(member.probationaryAssessment?.assessmentOpinions?.[1]?.branchOpinionDate) }}</p>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </n-space>
    </div>
    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div v-if="member.probationaryAssessment && member.probationaryAssessment.assessmentOpinions && member.probationaryAssessment.assessmentOpinions.length > 0"
         class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="500">
          <n-anchor-link title="封面" href="#page-1" />
          <n-anchor-link title="说明" href="#page-2" />
          <n-anchor-link title="第一季度考察" href="#page-3" />
          <n-anchor-link title="第一季度意见" href="#page-4" />
          <n-anchor-link title="第二季度考察" href="#page-5" />
          <n-anchor-link title="第二季度意见" href="#page-6" />
        </n-anchor>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { NSpace, NAnchor, NAnchorLink, NAffix } from 'naive-ui'

// Ref 绑定到根滚动容器
const documentContainer = ref(null)

const props = defineProps({
  member: {
    type: Object,
    default: () => ({
      memberName: '李四',
      genderType: '男',
      birthDate: '1999-08-01',
      probationaryAssessment: {
        assessmentOpinions: [
          {
            sponsor1Name: '张三',
            sponsor2Name: '王五',
            sponsorOpinionDate: '2016-12-16',
            branchSecretaryName: '赵六',
            branchOpinionDate: '2016-12-16'
          },
          {
            sponsor1Name: '张三',
            sponsor2Name: '王五',
            sponsorOpinionDate: '2017-06-16',
            branchSecretaryName: '赵六',
            branchOpinionDate: '2017-06-16'
          }
        ]
      }
    })
  },
})

// 日期格式化辅助函数
const formatDate = (dateString) => {
  if (!dateString) return '    年   月   日'
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}年 ${month}月 ${day}日`
}
</script>

<style scoped>
.indent-8 {
  text-indent: 2em;
}

td {
  vertical-align: top;
}
</style>
